<template>
    <div class="column-filter">
        <el-row>
            <el-card class="box-card card">
                <div slot="header" class="clearfix">
                    <span>产品分类</span>
                </div>
                <el-col :span="24" class="cascade-item" v-for="(v,k,i) in cascadeColMeta" :key="i">
                    <CascadeFilterCondition :catalog="k"></CascadeFilterCondition>
                </el-col>
            </el-card>
            <el-card class="box-card card">
                <div slot="header" class="clearfix">
                    <span>条件查询</span>
                </div>

                <el-col :span="24">
                    <el-button class="add" circle icon="el-icon-plus" size="small" type="primary"
                               @click="showAddColFilterDialog=true"></el-button>
                </el-col>
                <el-col :xl="8" :lg="8" :md="12" :sm="12" :xs="24" v-for="filter in getFilters" :key="filter.name"
                        class="item">
                    <FilterCondition :filter="filter"></FilterCondition>
                </el-col>
            </el-card>
        </el-row>
        <el-dialog
                title="添加筛选列"
                :visible.sync="showAddColFilterDialog"
                :append-to-body="true"
                center>
            <el-select v-model="newFilterName" size="small">
                <el-option v-for="col in colNames" :key="col" :label="col" :value="col"></el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addFilterCondition" class="long">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import FilterCondition from "@/components/FilterCondition";
    import CascadeFilterCondition from '@/components/CascadeFilterCondition';

    export default {
        name: "ColumnFilter",
        components: {
            FilterCondition, CascadeFilterCondition,
        },
        data() {
            return {
                showAddColFilterDialog: false,
                newFilterName: '',
                defaultFilters: [
                    {name: '温度类型', value: null},
                    {name: '压力等级', value: null},
                    {name: '本体材质', value: null},
                    {name: '尺寸规格', value: null},
                    {name: '接口规格1', value: null},
                    {name: '接口规格2', value: null},
                ],
            }
        },
        computed: {
            resetFlag() {
                return this.$store.state.table2.resetFlag;
            },
            cascadeColMeta() {
                return this.$store.state.table2.cascadeColMeta;
            },
            ...mapGetters(['colNames', 'getFilters']),
        },
        created() {
            this.$store.dispatch('addFilters', this.defaultFilters);
        },
        watch: {
            resetFlag: function (val) {
                if (val) {
                    this.$store.dispatch('addFilters', this.defaultFilters);
                }
            }
        },
        methods: {
            addFilterCondition() {
                if (this.newFilterName.length <= 0) {
                    this.$utils.AppMessage.error('请选择列');
                    return;
                }
                this.$store.dispatch('addFilter', {name: this.newFilterName, value: null}).then(() => {
                    this.newFilterName = '';
                    this.showAddColFilterDialog = false;
                });
            },
        }
    }
</script>

<style scoped>
    .column-filter {
        padding: 10px 5px;
    }

    .column-filter .item {
        margin-top: 10px;
    }

    .column-filter .add {
        margin-bottom: 10px;
    }

    .column-filter .cascade-title {
        font-size: 14px;
        color: #333333;
        padding: 2px 4px;
        font-weight: bold;
    }

    .column-filter .cascade-item {
        margin: 2px 0px;
    }

    .el-select {
        width: 100%;
    }

    .card {
        margin: 16px 0;
        padding-bottom: 16px;
    }
</style>